<template>
  <div class="related-container">
    <div class="header-box">
      <SectionTitle :title="sectionTitle">
        <el-tooltip v-if="tipText" :open-delay="800" placement="right">
          <div slot="content" style="max-width: 260px; line-height: 1.5">{{ tipText }}</div>
          <tipIcon is-diy style="margin-left: 5px"/>
        </el-tooltip>
      </SectionTitle>
      <template v-if="!showMobilePage && showRelatedBtn">
        <span style="flex:1;"/>
        <PlainCreateBtn :style="relatedStyle" style="width: 100px;margin-left: 12px;" size="small" @click="selectQueryOrder">关联询单</PlainCreateBtn>
      </template>
    </div>
    <div v-if="showMobilePage && showRelatedBtn" class="pt10 options-btn-group">
      <PlainCreateBtn :style="relatedStyle" style="width: 100px;margin-left: 12px;" size="small" @click="selectQueryOrder">关联询单</PlainCreateBtn>
    </div>
    <el-table
      v-if="selectData.length > 0"
      ref="customerTableRef"
      :data="selectData"
      :row-height="49"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
    >
      <el-table-column align="left" label="询单编号">
        <template slot-scope="scope">
          <div v-if="scope.row.sn" style="cursor:pointer;color:#406EFF;" @click="toDetail(scope.row)">
            <ToolTip :content="handleSnNumber(scope.row.sn)" is-can-click @handelClick="toDetail(scope.row)" />
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="品牌名称">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.brandName" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="产品名称">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.productName" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单平台">
        <template slot-scope="scope">
          <div class="flex">
            <platformIcon :data="scope.row.platformName" />
            <ToolTip :content="scope.row.platformName" />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="合作形式">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.cooperationForm" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建人">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.creator" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建时间">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.createDate | format('YYYY/MM/DD HH:mm')" />
        </template>
      </el-table-column>
      <el-table-column v-if="showRelatedBtn" align="left" label="操作">
        <template slot-scope="scope">
          <span class="delete-btn" @click="deleteRelated(scope.row.id)">取消关联</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-else class="empty-container">
      <div class="empty-box">
        <img :src="emptyInvoice" alt="empty">
        <div class="empty-text">暂无数据</div>
      </div>
    </div>
    <relatedQueryOrder
      ref="showRelatedQueryOrder"
      :visible.sync="showRelatedQueryOrder"
      @confirmRelatedQueryOrder="confirmRelatedQueryOrder"
    />
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import relatedQueryOrder from '@/components/RelatedQueryOrder/relatedQueryOrder.vue';
import { mapState } from 'vuex';
import PlatformIcon from '@/components/Common/platformIcon';
import mobileTable from '@/mixins/mobileTable';
import { format } from '@/filters/date';
import { cancelOrderRelated } from '@/api/order';
import emptyInvoice from '@/assets/empty-invoice.png';
export default {
  components: { SectionTitle, relatedQueryOrder, PlatformIcon },
  filters: { format },
  mixins: [mobileTable],
  props: {
    value: {
      type: Array,
      default: () => {
        return [{}];
      }
    },
    tipText: {
      type: String,
      default: ''
    },
    sectionTitle: {
      type: String,
      default: '询单信息'
    },
    relatedStyle: {
      type: Object,
      default: () => ({})
    },
    orderId: {
      type: Number | String,
      default: null
    },
    showRelatedBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      emptyInvoice,
      showRelatedQueryOrder: false,
      selectData: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    getParams() {
      return this.selectData.length ? this.selectData[0] : {};
    },
    setDefault(data) {
      this.selectData = data ? [data] : [];
    },
    confirmRelatedQueryOrder(data) {
      this.selectData = [data];
      this.showRelatedQueryOrder = false;
      this.$emit('confirmRelatedQueryOrder', data.id);
    },
    selectQueryOrder() {
      if (this.selectData.length) {
        this.$message.warning('订单仅能关联一条询单，请取消现有询单关联再进行操作');
        return;
      }
      this.showRelatedQueryOrder = true;
    },
    deleteRelated(id) {
      this.$confirm('是否确认取消关联询单?', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        if (!this.orderId) {
          // create
          this.selectData = [];
        } else {
          // detail
          const params = {
            id,
            orderId: this.orderId
          };
          cancelOrderRelated(params).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功');
              this.$emit('cancelRelated');
            }
          }).catch(err => {
            console.error(err.message);
          });
        }
      }).catch(() => {
        return;
      });
    },
    toDetail(row) {
      const routeUrl = this.$router.resolve({
        name: 'flyNoticeDetail',
        query: {
          id: row.id
        }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #EBEEFD;
  padding: 12px 0 18px 0;
  .empty-box {
    display: flex;
    align-items: center;
  }
  img {
    width: 12px;
    margin-right: 4px;
  }
  .empty-text {
    color: #999;
    font-size: 14px;
    margin: 0 auto;
  }
}
.fb-table {
  margin-top: 30px;
}
.delete-btn {
  color: #406EFF;
  cursor: pointer;
}
</style>
